<template>
  <div class="todoapp">
    <TodoHeader></TodoHeader>
    <TodoMain></TodoMain>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
// 导入
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
import { mapState, mapGetters } from 'vuex'
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },

  methods: {},
  computed: {
    // 映射数据
    ...mapState(['list'])
    // ...mapGetters('showList')
  },
  watch: {
    list: {
      deep: true,
      handler () {
        // 当数组发生变化时，存入本地
        localStorage.setItem('todolist', JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
